<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>登录</title>
	<link rel="stylesheet" href="/pear/css/pear.css" />
	<link rel="stylesheet" href="/css/other/login.css" />
	<link rel="stylesheet" href="/css/variables.css" />
	<script>if (window.self != window.top) { top.location.reload();}</script>
</head>

<body>
	<div class="login-page" style="background-image: url(/img/background.svg)">
		<div class="layui-row">
			<div class="layui-col-sm6 login-bg layui-hide-xs">
				<img class="login-bg-img" src="/img/banner.png" alt="" />
			</div>
			<div class="layui-col-sm6 layui-col-xs12 login-form">
				<div class="layui-form">
					<div class="form-center">
						<div class="form-center-box">
							<div class="top-log-title">
								<img class="top-log" src="/img/logo.png" alt="" />
								<span>xPanel</span>
							</div>
							<div class="top-desc">
								简 单 易 用 的 轻 量 级 服 务 器 管 理 面 板
							</div>
		
							<!-- 表单区域 -->
							<form class="layui-form" action="#" lay-filter="install-form">
								<div style="margin-top: 30px;">
									<div class="layui-form-item">
										<div class="layui-input-wrap">
											<div class="layui-input-prefix">
												<i class="layui-icon layui-icon-username"></i>
											</div>
											<input name="username" placeholder="账户" lay-verify="required" autocomplete="off" class="layui-input">
										</div>
									</div>
									<div class="layui-form-item">
										<div class="layui-input-wrap">
											<div class="layui-input-prefix">
												<i class="layui-icon layui-icon-password"></i>
											</div>
											<input type="password" name="password" placeholder="密码" lay-verify="required|confirmPassword" autocomplete="off" class="layui-input" lay-affix="eye">
										</div>
									</div>
									<div class="layui-form-item">
										<div class="remember-passsword">
											<div class="remember-cehcked">
												<input type="checkbox" name="remember" lay-skin="primary" title="记住登录状态">
											</div>
										</div>
									</div>
									<div class="login-btn">
										<button id="loginBtn" class="layui-btn login" lay-submit lay-filter="login">登 录</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 资 源 引 入 -->
	<script src="/layui/layui.js"></script>
	<script src="/pear/pear.js"></script>
	<script>
		layui.use(['form', 'button', 'popup'], function () {
			var form = layui.form;
			var button = layui.button;
			var popup = layui.popup;

			// 登 录 提 交
			form.on('submit(login)', function (data) {
				const formData = data.field;
				
				// 禁用按钮
				var btn = document.getElementById('loginBtn');
				btn.classList.add('layui-btn-disabled');
				btn.disabled = true;
				
				// 显示加载动画
				layer.load(2);
				
				// 发送请求
				fetch("/login", {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify(formData)
				})
				.then(response => response.json())
				.then(data => {
					if ( data.result ) {
						layer.msg(data.msg, {icon: 1});
						// 2秒后跳转到登陆页面
						setTimeout(() => {
							window.location.href = '/';
						}, 2000);
					} else {
						layer.msg(data.msg, {icon: 2});
						btn.classList.remove('layui-btn-disabled');
						btn.disabled = false;
					}
				})
				.catch(error => {
					layer.msg('请求出错，请查看开发者工具检查原因', {icon: 2});
					console.error('Error:', error)
					btn.classList.remove('layui-btn-disabled');
					btn.disabled = false;
				});
				
				// 关闭加载动画
				layer.closeAll('loading');
				
				// 阻止默认提交（由JS控制）
				return false;
			});
		})
	</script>
</body>

</html>
